<!--
 * @Author: your name
 * @Date: 2022-03-20 17:57:01
 * @LastEditTime: 2022-04-18 22:59:30
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-antd-admin\vue-admin-template\src\views\personal\personalDetails.vue
-->
<template>
  <div>
    <!-- 个人信息页面 -->
    <div>
      <!-- 头像 -->
      <div class="header"
           style="display: flex">
        <div style="width: 82px; margin: 0 auto"
             class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="80"
                       style="marginTop: 10px"
                       :src="circleUrl" />
          </div>
        </div>
        <div style="width: 82px; margin: 0 auto; position: relative">
          <div style="position: absolute; bottom: 0">
            <el-button type="text"
                       @click="touVisible = true">修改头像</el-button>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <el-divider />
      <!-- 个人信息详情 -->
      <div class="xiangqing"
           style="marginLeft: 8px">
        <div>登录用户：{{ this.personal.username }}</div>
        <div>用户姓名：{{ this.personal.realname }}</div>
        <div>用户角色：{{ this.role }}</div>
        <div>
          注册时间：{{
          moment(this.personal.createdAt).format("YYYY-MM-DD hh:mm:ss")
        }}
        </div>
        <div>
          状态：
          <el-tag v-if="this.personal.is_active"
                  type="success">正常</el-tag>
          <el-tag v-else
                  type="warning">禁用</el-tag>
        </div>
      </div>
      <el-divider />
      <div class="header"
           style="display: flex">
        <div style="width: 82px; margin: 0 auto; position: relative; marginTop: 8px">
          <div style="position: absolute; bottom: 0">
            <el-button type="text"
                       @click="geVisible = true">修改个人信息</el-button>
          </div>
        </div>
      </div>

      <!-- 修改头像模态框 -->
      <div>
        <el-dialog title="更改头像"
                   :visible.sync="touVisible"
                   @close="toclose">
          <el-upload class="avatar-uploader"
                     :action="uploadFileURL"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="touVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="fixtou">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 更改个人信息 -->
      <div>
        <el-dialog title="更改个人信息"
                   :visible.sync="geVisible">
          <el-form ref="ruleForm"
                   :rules="rules"
                   :model="personal">
            <el-form-item label="登录用户"
                          prop="username"
                          :label-width="formLabelWidth">
              <el-input v-model="personal.username"
                        :disabled="true"
                        autocomplete="off" />
            </el-form-item>
            <el-form-item prop="realname"
                          label="姓名"
                          :label-width="formLabelWidth">
              <el-input v-model="personal.realname"
                        autocomplete="off" />
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="geVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="fixge">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { uploadFileURL } from '@/utils/config'
import { baseUserAvatar, getInfo, updateAdmin } from '@/api/user'
import moment from 'moment'
export default {
  data() {
    return {
      userInfo: {},
      // 修改头像的表单
      form: {
        id: '',
        avatar: ''
      },
      circleUrl: '',
      touVisible: false,
      uploadFileURL,
      imageUrl: '',
      geVisible: false,
      formLabelWidth: '120px',
      rules: {},
      moment,
      personal: {},
      role: ''
    };
  },
  created() {
    this.getmessage()
  },
  mounted() {

  },
  methods: {
    async getmessage() {
      const token = getToken()
      this.$store.dispatch('user/getInfo', { token }).then(res => {
        if (res) {
          this.personal = res
          this.role = res.role.name
          this.circleUrl = res.avatar
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.avatar = res.data.file
    },
    async fixtou() {
      if (this.form.avatar === '') {
        this.$notify.warning({
          title: '错误',
          message: '请上传头像'
        })
      } else {
        this.form.id = this.personal.id
        const res = await baseUserAvatar(this.form)
        this.touVisible = false
        this.getmessage()
        this.$notify.success({
          title: '成功',
          message: res.message
        })
      }
    },
    async fixge() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await updateAdmin(this.personal)
          this.$notify.success({
            title: '成功',
            message: res.message
          })
          this.getmessage()
          this.geVisible = false
        } else {
          return false
        }
      })
    },
    toclose() {

    }
  }
};
</script>

<style scoped lang="scss">
.avatar {
  width: 178px;
  height: 178px;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.header {
  display: flex;
}
.xiangqing > div {
  height: 50px;
}
</style>
